<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="swiper/swiper-3.3.1.min.css" />
		<link rel="stylesheet" href="swiper/animate.min.css" />
		<style>
			*{
				margin:0;
				padding:0;
			}
			.swiper-container{
				width:100vw;
				height:100vh;
			}
			.swiper-container .swiper-wrapper .swiper-slide{
				height:100vh;
				width:100vw;
				font: bold 20px/100vh "微软雅黑";
				color:white;
			} 
			.swiper-container .swiper-wrapper .slide1{
				background: cadetblue;
				position: relative;
			}
			.swiper-container .swiper-wrapper .slide2{
				background: coral;
			}
			.swiper-container .swiper-wrapper .slide3{
				background: blueviolet;
			}
			.swiper-container .bg{
				
			}
			.swiper-container .bg img{
				width:100vw;
				height:843/535*100vw;
				transform: scale(4);
				animation: 3s bgToSmall forwards;
			}
			.swiper-container .ball img{
				position:absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				animation: 1s shine infinite;
			}
			
			
			.swiper-container .ball2 img{
				position:absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%) scale(0.3);
				animation: 2s toBig infinite;
			}
			.swiper-container .txt{
				width:100vw;
				height:50px;
				text-align: center;
				color:white;
				font:bold 50px/50px "微软雅黑";
				position:absolute;
				top:50%;
				transform: translateY(-50%);
			}
			@keyframes shine{
				0%{
					opacity: 0;	
				}
				50%{
					opacity: 1;
					
				}
				100%{
					opacity: 0;
					
				}
			}
			@keyframes toBig{
				0%{
					transform: translate(-50%,-50%) scale(0.3);
				}
				95%{
					transform: translate(-50%,-50%) scale(1);
				}
				100%{
					transform: translate(-50%,-50%) scale(1);
				}
			}
			@keyframes bgToSmall{
				100%{
					transform: scale(1.5);
				}
			}
			
			#audio{
				width:40px;
				height:40px;
				border-radius: 50%;
				background: red;
				border:2px solid white;
				position: fixed;
				top:20px;
				right:20px;
				z-index: 1000;
				line-height: 40px;
				text-align: center;
				color:white;
				animation: 2s rotate linear infinite;
			}
			@keyframes rotate{
				100%{
					transform: rotate(360deg);
				}
			}

		</style>
	</head>

	<body>
		
		<div class="swiper-container myContainer">
			<div id="audio">
				123
			</div>
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1">
					<div class="bg">
						<img src="bg.png" alt="" />
					</div>
					<div class="ball">
						<img src="ball.png" alt="" />
					</div>
					<div class="ball2">
						<img src="ball.png" alt="" />
					</div>
					<div class="txt">
						<p  class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s">2016</p>
					</div>
				</div>
				<div class="swiper-slide slide2">Slide 2</div>
				<div class="swiper-slide slide3">Slide 3</div>
				
			</div>
			
			
		</div>

		<script src="swiper/jquery-1.10.1.min.js"></script>
		<script src="swiper/swiper.animate1.0.2.min.js"></script>
		<script src="swiper/swiper-3.3.1.jquery.min.js"></script>
		<script>
			$(function(){
				var mySwiper = new Swiper('.myContainer', {
					
					
					onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
					    swiperAnimateCache(swiper); //隐藏动画元素 
					    swiperAnimate(swiper); //初始化完成开始动画
					  }, 
					  onSlideChangeEnd: function(swiper){ 
					    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
					  },
					direction: 'vertical',
					loop: true,//无缝滚动控制
				})	
				
				//点击不转
				$('#audio').click(function(){
					
					$(this).css({

//						'animationPlayState':'paused',
						'animation':'none'

					});
				})
			})
			
		</script>
	</body>

</html>